---
title: lint-staged
description: lint-stagedでステージされたGitファイルに対して自動的にUltraciteを実行します
---

Ultraciteは[lint-staged](https://github.com/okonet/lint-staged)とシームレスに統合され、各コミット前にコードのフォーマットとリンティングを自動的に実行します。これにより、クリーンで適切にフォーマットされたコードのみがリポジトリに入ることが保証されます。

## lint-stagedとは？

lint-stagedはステージされたGitファイルに対してリンターやフォーマッターを実行するツールです。特に有用な点は次のとおりです:

- 実際にコミットされるファイルのみを処理する
- フォーマットが不十分なコードがリポジトリに入るのを防ぐ
- 変更されたファイルのみをチェックするため高速に動作する
- Gitフックと完全に統合される

## Ultraciteがlint-stagedをどのように利用するか

`npx ultracite init` を実行し、lint-stagedオプションを選択すると、Ultraciteは自動的に次を行います:

1. **lint-stagedを開発依存としてインストールします**
2. **lint-stagedの設定を作成または更新します**
3. **関連するファイルタイプに対してフォーマッターを設定します**

デフォルト設定では、次のファイルタイプに対して `npx ultracite fix` を実行します:
- JavaScript/TypeScriptファイル（`.js`, `.jsx`, `.ts`, `.tsx`）
- JSONファイル（`.json`, `.jsonc`）
- CSSファイル（`.css`, `.scss`）
- Markdownファイル（`.md`, `.mdx`）

## サポートされている設定フォーマット

Ultraciteのlint-staged統合は、標準的なlint-staged設定フォーマットをすべてサポートします:

### package.json

```json title="package.json"
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
  }
}
```

### .lintstagedrc.json

```json title=".lintstagedrc.json"
{
  "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
}
```

### .lintstagedrc.js (CommonJS)

```javascript title=".lintstagedrc.js"
module.exports = {
  "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
};
```

### .lintstagedrc.mjs (ES Modules)

```javascript title=".lintstagedrc.mjs"
export default {
  "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
};
```

### .lintstagedrc.yaml

```yaml title=".lintstagedrc.yaml"
"*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}":
  - 'npx ultracite fix'
```

## スマートな設定マージ

すでにlint-stagedの設定がある場合、Ultraciteは次を行います:

- **既存の設定形式を検出**します
- **Ultraciteのルールを既存のルールとマージ**します
- **カスタム設定を保持**します
- **ファイルをその場で更新**します

つまり、すでにlint-stagedをセットアップしてある場合でも、`npx ultracite init` を安全に実行できます。

## 動作の仕組み

1. **プリコミットフック**: lint-stagedはHusky経由で各コミット前に実行されます
2. **ファイル検出**: パターンに一致するステージされたファイルのみが処理されます
3. **フォーマットコマンド**: 各一致ファイルで `npx ultracite fix` が実行されます
4. **自動修正**: Biomeは可能な限り問題を自動で修正します
5. **再ステージ**: 修正されたファイルは自動的に再ステージされ、コミット用に準備されます

## 手動設定

初期化後にlint-stagedの設定をカスタマイズする必要がある場合は、設定を編集できます:

```json title="package.json"
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["npx ultracite fix", "npm run test:unit"],
    "*.{json,jsonc}": ["npx ultracite fix"],
    "*.{css,scss}": ["npx ultracite fix", "npm run test:styles"],
    "*.{md,mdx}": ["npx ultracite fix"]
  }
}
```

## コマンド統合

lint-staged統合はUltraciteのコマンド構造と連携します:

- **`npx ultracite fix`**: Biomeを自動修正付きで実行します（lint-stagedで使用）
- **`npx ultracite check`**: 自動修正なしでBiomeを実行します（CI/手動チェック用）

## トラブルシューティング

### 設定が見つからない
lint-stagedの設定が見つからないエラーが出た場合:

```bash
npx ultracite init  # Re-run initialization
```

### ESM/CommonJS の問題
Ultraciteはプロジェクトタイプを自動検出し、適切な設定フォーマットを作成します:

- **ESMプロジェクト**（package.jsonに `"type": "module"` がある場合）は `.mjs` 設定を作成します
- **CommonJSプロジェクト** は `.cjs` 設定を作成します
- **フォールバック**: モジュール検出に失敗した場合は `.lintstagedrc.json` を作成します

### 既存の設定の競合
複雑な既存設定がある場合は手動でマージする必要があるかもしれません:

1. 既存のlint-staged設定をバックアップする
2. `npx ultracite init` を実行する
3. 必要なカスタムルールを手動でマージする

## ベストプラクティス

1. **高速に保つ**: lint-stagedでは必須のチェックのみを実行する
2. **具体的なパターンを使用する**: 処理が必要なファイルだけを対象にする
3. **CIと組み合わせる**: ローカルでは迅速なチェックにlint-stagedを使い、CIで完全なリンティングを行う
4. **セットアップをテストする**: テストコミットを作成して正しく動作するか確認する

## 関連

- [Husky Integration](/integration/husky) - Gitフックのセットアップ
- [Configuration](/configuration) - Biomeの設定オプション
- [Setup](/setup) - プロジェクトの初期セットアップ